import React from 'react';
import { Text, View, ScrollView, TouchableWithoutFeedback } from 'react-native';
import { WhiteSpace, WingBlank, Flex, Button } from '@ant-design/react-native';

const PlaceHolder = (props) => (
  <View
    style={{
      backgroundColor: '#fff',
      height: 30,
      alignItems: 'center',
      justifyContent: 'center',
    }}
    {...props}>
    <Text style={{ color: '#bbb' }}>Block</Text>
  </View>
)

const Circle = (prop) => {
  const size = prop.size || 20
  const color = prop.color || '#527fe4'
  const style = {
    borderRadius: size / 2,
    backgroundColor: color,
    width: size,
    height: size,
    margin: 1,
  }
  return <View style={style} />
}

export default function WhiteSpaceExample({ navigation }) {
  const buttons = ['', '', ''];
  const circles = ['', '', '', '', ''];
  const texts = ['', '', '', '', ''];

  return (
    <ScrollView contentContainerStyle={{ padding: 20 }}>
      <Text>WhiteSpace</Text>
      <View style={{ borderWidth: 1, borderColor: '#ccc', marginBottom: 20 }}>
        <WhiteSpace size="xs" />
        <PlaceHolder />

        <WhiteSpace size="sm" />
        <PlaceHolder />

        <WhiteSpace />
        <PlaceHolder />

        <WhiteSpace size="lg" />
        <PlaceHolder />

        <WhiteSpace size="xl" />
        <PlaceHolder />
      </View>
      <Text>WingBlank</Text>
      <View style={{ borderWidth: 1, borderColor: '#ccc', marginBottom: 20 }}>
        <WhiteSpace />
        <WingBlank>
          <PlaceHolder />
        </WingBlank>

        <WhiteSpace size="lg" />
        <WingBlank size="md">
          <PlaceHolder />
        </WingBlank>

        <WhiteSpace size="lg" />
        <WingBlank size="sm">
          <PlaceHolder />
        </WingBlank>
      </View>
      <Text>Flex</Text>
      <View style={{ borderWidth: 1, borderColor: '#ccc', marginBottom: 20 }}>
        <ScrollView
          style={{ flex: 1 }}
          automaticallyAdjustContentInsets={false}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
        >
          <WingBlank style={{ marginTop: 20, marginBottom: 5 }}>
            <Text style={{ marginBottom: 10 }}>项目的排列方向</Text>
            <Text>direction="row":主轴为水平方向，起点在左端</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex>
              {
                buttons.map((item, index) => {
                  return (
                    <Flex.Item key={index+1} style={{ paddingLeft: 4, paddingRight: 4 }}>
                      <Button size="small">{`按钮${index+1}`}</Button>
                    </Flex.Item>
                  )
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>direction="column":主轴为垂直方向，起点在上沿</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex direction="column">
              {
                buttons.map((item, index) => {
                  return (
                    <Flex.Item key={index+1} style={{ paddingBottom: 4 }}>
                      <Button size="large">{`按钮${index + 1}`}</Button>
                    </Flex.Item>
                  )
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text style={{ marginTop: 20, marginBottom: 20 }}>
              项目在主轴上的对齐方式
            </Text>
            <Text>justify="start":左对齐</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex justify="start">
              {
                circles.map((item, index) => {
                  return <Circle key={index+1} size={21} color={'rgba(0, 0, 0, 0.85)'} />
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>justify="center":居中</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex justify="center">
              {
                circles.map((item, index) => {
                  return <Circle key={index+1} size={21} color={'#1890ff'} />
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>justify="end":右对齐</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex justify="end">
              {
                circles.map((item, index) => {
                  return <Circle key={index+1} color={'#52c41a'} />
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>justify="between":两端对齐，项目之间的间隔都相等</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex justify="between">
              {
                circles.map((item, index) => {
                  return <Circle key={index+1} color={'#faad14'} />
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>justify="around":每个项目两侧的间隔相等</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex justify="around">
              {
                circles.map((item, index) => {
                  return <Circle key={index+1} color={'#f5222d'} />
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text style={{ marginTop: 20, marginBottom: 20 }}>
              项目在交叉轴上的对齐方式
            </Text>
            <Text>align="start":交叉轴的起点对齐</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex align="start" style={{ height: 30 }}>
              {
                texts.map((item, index)=>{
                  return (
                    <Text 
                      key={index+1}
                      style={{
                        fontSize: 30 - index * 4,
                        borderWidth: 1,
                        borderStyle: 'solid',
                        borderColor: '#527fe4',
                        marginRight: 5,
                      }}>
                      兜兜
                    </Text>
                  )
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>align="center":交叉轴的中点对齐</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex align="center" style={{ height: 30 }}>
              {
                texts.map((item, index) => {
                  return (
                    <Text
                      key={index+1}
                      style={{
                        fontSize: 30 - index * 4,
                        borderWidth: 1,
                        borderStyle: 'solid',
                        borderColor: '#f5222d',
                        marginRight: 5,
                      }}>
                      兜兜
                    </Text>
                  )
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>align="end":交叉轴的终点对齐</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex align="end" style={{ height: 30 }}>
              {
                texts.map((item, index) => {
                  return (
                    <Text
                      key={index + 1}
                      style={{
                        fontSize: 30 - index * 4,
                        borderWidth: 1,
                        borderStyle: 'solid',
                        borderColor: '#faad14',
                        marginRight: 5,
                      }}>
                      兜兜
                    </Text>
                  )
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>
              align="stretch":如果项目未设置高度或设为auto，将占满整个容器的高度
            </Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex align="stretch" style={{  }}>
              {
                texts.map((item, index) => {
                  return (
                    <Text
                      key={index + 1}
                      style={{
                        fontSize: 30 - index * 4,
                        borderWidth: 1,
                        borderStyle: 'solid',
                        borderColor: '#faad14',
                        marginRight: 5,
                      }}>
                      兜兜
                    </Text>
                  )
                })
              }
            </Flex>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text style={{ marginBottom: 10 }}>是否折行</Text>
            <Text>wrap="wrap":换行</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <TouchableWithoutFeedback onPress={() => ({})}>
              <Flex wrap="wrap">
                {'ooooooooooooooooooooooooooooo'.split('').map((char, i) => (
                  <Circle key={i+1} key={`${i}-${char}`} />
                ))}
              </Flex>
            </TouchableWithoutFeedback>
          </WingBlank>
          <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
            <Text>wrap="nowrap":不换行</Text>
          </WingBlank>
          <WingBlank style={{ marginBottom: 5 }}>
            <Flex wrap="nowrap" onPress={() => ({})}>
              {'ooooooooooooooooooooooooooooo'.split('').map((char, i) => (
                <Circle key={i+1} key={`${i}-${char}`} />
              ))}
            </Flex>
          </WingBlank>
          <WhiteSpace />
          <WhiteSpace />
          <WhiteSpace />
        </ScrollView>
      </View>
    </ScrollView>
  );
};
